<template>
  <div class="indicator_center_wrap">
    <div class="search_box">
      <div class="line_1">
        <div class="row_left">
          <div class="title">指标中心</div>
          <el-tabs v-model="editableTabsValue" type="card" @tab-click="handleClick">
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="row_right">
          <el-input
            v-show="editableTabsValue === '全部'"
            v-model="name"
            placeholder="请输入内容"
            clearable
            @keyup.native="inputClick"
            @clear="inputSearch"
          >
            <template slot="append"><i class="el-icon-search" @click="inputSearch"></i></template>
          </el-input>
          <el-button
            type="primary"
            class="menu_btn ml-6"
            icon="el-icon-menu"
            @click="$router.push('/home/index-catalog')"
            >指标目录</el-button
          >
        </div>
      </div>
      <Sort v-show="editableTabsValue === '全部'" @tab-click="onTabClick" />
      <Tag v-show="editableTabsValue === '全部'" @tag-change="onTagChange" />
    </div>
    <div v-loading="tableLoading" class="content_box">
      <el-row :gutter="20">
        <el-col v-for="item in tableData" :key="item.id" :xs="12" :md="8" :lg="6">
          <MatrixGridCard :matrix="item" />
        </el-col>
      </el-row>
      <Empty ref="empty" />
    </div>
    <avue-crud
      ref="crud"
      v-model="form"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      :search.sync="searchForm"
      @on-load="loadListData"
      @search-change="onSearchChange"
      @search-reset="onSearchReset"
      @refresh-change="onRefresh"
    >
    </avue-crud>
  </div>
</template>

<script>
import { requestJtxIndexCenterPage } from '@/api/chart/chart'
import ListMixin from '@/utils/mixins/list-mixin'
import MatrixGridCard from './components/grid-card'
import Sort from '@/components/home/sort.vue'
import Tag from '@/components/home/tag.vue'
import Empty from '@/components/home/empty.vue'
import { debounce } from 'lodash'
export default {
  name: 'IndicatorCenter',
  components: { MatrixGridCard, Sort, Tag, Empty },
  mixins: [ListMixin],
  data() {
    return {
      name: '',
      page: {
        total: 0,
        currentPage: 1,
        pageSize: 12,
        pageSizes: [8, 12, 24, 36, 48],
        layout: 'total, sizes, prev, pager, next, jumper',
        background: true,
      },
      listApi: requestJtxIndexCenterPage,
      tableOption: {
        columnBtn: false,
        refreshBtn: false,
        addBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        selection: false,
        searchLabelWidth: 100,
        searchMenuPosition: 'left',
        menu: false,
        showHeader: false,
        column: [],
      },
      editableTabsValue: '全部',
      editableTabs: [
        {
          title: '全部',
          name: '全部',
        },
        {
          title: '收藏',
          name: '收藏',
        },
        {
          title: '我的',
          name: '我的',
        },
      ],
      tabIndex: 3,
    }
  },
  watch: {
    tableData: {
      handler: function (val, oldVal) {
        this.$refs.empty?.countListPageType(this.tableData, false, this.editableTabsValue === '全部' ? this.name : '')
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    handleClick(tab) {
      this.searchForm.collect = tab.name
      this.inputSearch()
    },
    inputClick(event) {
      const keyCode = event.keyCode || event.which
      if (keyCode == 13) {
        this.inputSearch()
      }
    },
    inputSearch() {
      this.searchForm.name = this.name
      this.onRefresh()
    },
    onTabClick(tab) {
      this.tableLoading = true
      this.handleTabClick(tab)
    },
    handleTabClick: debounce(async function (tab) {
      this.tableLoading = true
      try {
        this.searchForm.indexType = tab.name
        if (this.searchForm.indexType === '全部') {
          this.searchForm.indexType = ''
        }
        await this.loadListData(this.page, this.searchForm)
      } catch (error) {}

      this.tableLoading = false
    }, 1000),
    onTagChange(tag) {
      this.tableLoading = true
      this.handleTagChange(tag)
    },
    handleTagChange: debounce(async function (tag) {
      this.tableLoading = true
      try {
        this.searchForm.indexLabel = tag.join(',')
        if (this.searchForm.indexLabel === '全部') {
          this.searchForm.indexLabel = ''
        }
        await this.loadListData(this.page, this.searchForm)
      } catch (error) {}

      this.tableLoading = false
    }, 1000),
    addTab(targetName) {
      let newTabName = ++this.tabIndex + ''
      this.editableTabs.push({
        title: '标签',
        name: newTabName,
        closable: true,
      })
      this.editableTabsValue = newTabName
    },
    removeTab(targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }

      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName)
    },
  },
}
</script>

<style lang="scss" scoped>
.indicator_center_wrap {
  // padding: 4px;
  background: #edf1f8;
  border-radius: 8px;
}
.search_box {
  z-index: 55;
  background: #fff;
  padding: 10px 16px 1px;
  box-shadow: 0px 5px 10px 0px #f1f2fa;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  margin-bottom: 20px;

  ::v-deep .el-input__inner {
    border-right: none;
    &:focus {
      border-color: #dcdfe6;
    }
    &:hover {
      border-color: #dcdfe6;
    }
  }
}
.content_box {
  min-height: 30vh;
}
.title {
  width: 140px;
  height: 28px;
  line-height: 28px;
  padding-left: 40px;
  background: #fff url(../../assets/images/indicator.png) no-repeat;
  background-size: contain;
  font-size: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  color: #262626;
}
.line_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.row_left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.row_right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
::v-deep .el-tabs__header {
  margin: 0;
}
::v-deep .el-tabs__nav {
  height: 44px;
  background: #f5f7fb;
}
::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: 0px solid #e4e7ed;
}
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border: none;
  color: #7a838e;
  &.is-active {
    width: 107px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #ffffff;
    box-shadow: 0px 4px 0px 0px var(--primary-color);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid var(--primary-color);
    margin: 4px;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    color: var(--primary-color);
  }
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
::v-deep .el-icon-plus {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 500;
}

::v-deep .el-input-group__prepend {
  background-color: #fff;
  color: #8c8c8c;
}
::v-deep .el-input-group__append {
  background-color: #fff;
  color: #8c8c8c;
}
::v-deep .avue-crud__body {
  display: none;
}
::v-deep .el-card.is-never-shadow.avue-crud__pagination {
  background: transparent;
}
</style>
